<template>
  <div class="right-pane">
    <el-tabs class="tabs" v-model="activeTabName" @tab-click="handleClick" @tab-remove="closeTab" type="border-card">
      <el-tab-pane class="main-pane" v-for="item in tabList" :key="item.name" :name="item.name" :label="item.label"
                   :closable="item.closable">

        <transition name="move" mode="out-in">
          <component :is="item.component"></component>
        </transition>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import {mapState, mapMutations} from 'vuex';

  export default {
    computed: {
      activeTabName () {
        return this.$store.state.activeTabName
      },
      ...mapState([
        'tabList'
      ])
    },
    methods: {
      ...mapMutations([
        'closeTab'
      ]),
      handleClick (tab) {
      	this.$router.push(tab.name);

      	//选中当前点击的tab
        this.$store.state.activeTabName = tab.name;

        // 选中左侧相应菜单
        this.$store.state.asideNavActive = tab.name;

        // resize datagrid
        setTimeout(_ => {
          $(window).resize();
        });
      }
    }
  }
</script>
<style scoped lang="scss">
  .right-pane {
    height: 100%;
    /*width: 100%;*/
    margin: -20px;

    /deep/ > .el-tabs--border-card {
      background: 0;
      border: none;
      border-top: 1px solid #d1dbe5;
      box-shadow: none;

      & > .el-tabs__content {
        /*padding: 20px;*/
        box-sizing: border-box;
        margin-top: 45px;
      }

      & > .el-tabs__header {
        position: fixed;
        z-index: 1;
        width: calc(100% - 180px);
        margin-top: -1px;
      }
    }

    .tabs {
      width: 100%;
      box-sizing: border-box;
      padding-left: 0;
    }
  }
</style>
